<template>
  <div id="app">
    <router-link to="/add">添加</router-link>
    <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
      <el-table-column type="index" align="center" label="序号"></el-table-column>
      <el-table-column prop="name" label="学生名称" align="center"></el-table-column>
      <el-table-column align="header-center" label="生日" width="">
        <template slot-scope="scope">{{ moment(scope.row.birthday).format('YYYY-MM-DD') }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
              class="pagiantion"
              @current-change="handleCurrentChange"
              :current-page="pagination.currentPage"
              :page-size="pagination.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="pagination.total">
      </el-pagination>
    </div>
    <router-view></router-view>



  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment' // 导入文件
export default {
  name: 'App',
    data(){
      return {
          dataList:[],
          pagination: {//分页相关属性
              currentPage: 1,//当前页码
              pageSize:2,//每页显示的记录数
              total:100,//总记录数
          },
      }
    },methods:{
        findPage() {
            axios.post("http://localhost:8888/people/findAll",this.pagination).then(res => {
                this.dataList = res.data.rows;//当前页展示的数据集合
                this.pagination.total = res.data.total;//总数据量
            })
        },
        handleCurrentChange(currentPage) {
            //为模型数据赋值（当前页面）
            this.pagination.currentPage = currentPage;
            this.findPage();
        },
        moment(){
            return moment(...arguments)
        },
        handleDelete(row){
            axios.post("http://localhost:8888/people/del?id="+row.id).then(res=>{
                if(res.data.flag){
                    //执行成功
                    //弹出成功提示信息
                    this.$message({
                        type:'success',
                        message:res.data.message
                    });
                    //重新进行分页查询
                    this.findPage();
                }else{
                    //执行失败
                    this.$message.error(res.data.message);
                }
            })

        },
        handleUpdate(row){
            this.$router.push({path:'/add/'+row.id})
        }

    },
    mounted(){
      this.findPage()
    }
}
</script>

<style>
  .datatable {
    position: relative;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    color: rgb(96, 98, 102);
    overflow: hidden;
    flex: 1 1 0%;
  }
  .datatable td, .datatable th {
    padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }
</style>
